<h3 class="devui-h3-title">Drag Element with Real Entity(not ghost) followed</h3>
<div class="row">
  <div class="col-sm-3">
    <div class="card">
      <div class="card-header">Draggable Items</div>
      <div class="card-block">
        <ul class="list-group">
          <li
            dDraggable
            [enableDragFollow]="true"
            [dragFollowOptions]="{ appendToBody: appendToBody }"
            [dragOverClass]="'box-shadow'"
            *ngFor="let item of list1"
            [dragScope]="'default-css'"
            [dragData]="item"
            class="list-group-item over-flow-ellipsis"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="card card-outline-primary mb-3" dDroppable [dropScope]="'default-css'" (dropEvent)="onDrop($event)">
      <div class="card-header">Drop Area with Sortable</div>
      <div class="card-block">
        <ul class="list-group d-drop-el" dSortable>
          <li
            dDraggable
            [enableDragFollow]="true"
            [dragFollowOptions]="{ appendToBody: appendToBody }"
            [dragOverClass]="'box-shadow'"
            *ngFor="let item of list2"
            [dragScope]="'default-css'"
            [dragHandleClass]="'drag-handle'"
            [dragData]="item"
            class="list-group-item over-flow-ellipsis"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
<div class="option">
  <div class="option-toggle">
    <d-toggle [(ngModel)]="appendToBody"></d-toggle>
    <span style="margin-left: 8px">appendToBody</span>
  </div>
</div>
